<template>
    <el-dialog
        :title="title"
        :modal-append-to-body="true"
        :append-to-body="true"
        v-model:visible="dialogVisible"
    >
        <template v-slot:default>
            <el-form
                label-position="right"
                label-width="80px"
                :rules="rules"
                ref="form"
                :model="ruleForm"
            >
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="unitPrice">
                    <el-input v-model="ruleForm.phone" type="number"></el-input>
                </el-form-item>
                <el-form-item label="备注/描述" prop="remarks">
                    <el-input v-model="ruleForm.remarks" type="textarea" :rows="2"></el-input>
                </el-form-item>
            </el-form>

        </template>

        <template v-slot:footer>
            <span class="dialog-footer">
              <el-button @click="resetForm">取 消</el-button>
              <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { reactive, toRefs, ref } from 'vue'
import {addUser, editUser, getUserById} from "../../api/api";
import { Message } from 'element3'

export default {
    name: 'UserDialog',
    emits: ['ok'],
    props: {
        title: {
            type: String,
            default: '新增会员'
        }
    },
    setup(props, refs) {
        const dialogVisible = ref(false)
        const form = ref(null)
        const ruleForm = reactive({
            ruleForm: {
                id: null,
                name: '', // 商品名称
                phone: '', // 手机
                remarks: '' // 备注
            }
        })
        const rules = reactive({
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'change' }
                ]
            }
        })
        function open(obj) {
            dialogVisible.value = true
            if (obj) {
                ruleForm.ruleForm = obj
            } else {
                ruleForm.ruleForm.id = null
            }
        }
        function submitForm() {
            form.value.validate((valid) => {
                if (valid) {
                    const { id } = ruleForm.ruleForm
                    const param = {
                        integral: 0,
                        paytotal: 0,
                        ...ruleForm.ruleForm
                    }
                    if (id || id === 0) {
                        const oldUser = getUserById(id)
                        editUser({
                            ...oldUser,
                            ...param
                        })
                    } else {
                        addUser(param)
                    }
                    refs.emit('ok')
                    Message({
                        message: '保存成功！',
                        type: 'success'
                    })
                    resetForm()

                }
            })
        }
        function resetForm() {
            dialogVisible.value = false
            form.value.resetFields()
            ruleForm.ruleForm.id = null
        }
        return {
            dialogVisible,
            form,
            ...toRefs(ruleForm),
            ...toRefs(rules),
            open,
            submitForm,
            resetForm
        }
    }
}
</script>

<style lang="less" scoped>

</style>
